/* ======================================================
   <!-- Features -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';


$features-icon-size: 1.5rem;

.uix-feature {

	/* Horizontal Icons */
	.uix-feature__icon {
		display: inline-block;
		width: #{$features-icon-size*3};
		height: #{$features-icon-size*3};
		line-height: #{$features-icon-size*3};
		@include transition-default();

		i {
			font-size: #{$features-icon-size*1.2};
			@include transition-default();
		}

		&.is-bordered {
			border: 1px $primary-text-color solid;


			i {
				font-size: $features-icon-size;
			}
		}

		&:hover {
			background: $primary-text-color;
			border-color: $primary-text-color;


			i {
				color: #fff;
				transform: rotate(30deg);
			}

		}
	}



	/* Vertical Icons */
	.uix-feature__icon--side {
		position: relative;
		display: inline-block;
		width: #{$features-icon-size*2};
		height: #{$features-icon-size*2};
		line-height: #{$features-icon-size*2};
		@include transition-default();

		i {
			font-size: $features-icon-size;
			margin-right: .36rem;
			@include transition-default();
		}

		&:hover i {
			transform: rotate(30deg);
		}


		&.uix-feature__icon--side--sep-col {
			display: table-cell;
			vertical-align: top;
		}


		&.is-bordered {
			text-align: center;
			margin-right: 1rem;


			i {
				font-size: #{$features-icon-size/1.2};
				margin-right: 0;
			}

			~ .uix-feature__desc {
				transform: translateX(1rem);
			}

			&::before {
				content: '';
				display: block;
				width: #{$features-icon-size*2};
				height: #{$features-icon-size*2};
				position: absolute;
				z-index: 0;
				left: 0;
				top: 0;
				border: 1px $primary-text-color solid;
				text-align: center;
				margin-right: 1rem;

			}
		}

		&.is-bordered.uix-border--circle {

			&::before {
				border-radius: 100%;

			}
		}

		&.is-bordered.uix-border--rounded {

			&::before {
				border-radius: 4px;

			}
		}



	}


	.uix-feature__title {
		font-size: 1.125rem;
		letter-spacing: 0;

		&:hover i {
			transform: rotate(30deg);
		}
	}
	.uix-feature__desc {
		margin: 0;
		padding: 0;
		font-size: 0.75rem;
		line-height: 1.6;
		padding: .175em 0 1.2rem;

		&.uix-feature__desc--sep-col {
			padding-bottom: 1.2rem;
		}

		&.uix-feature__desc--sep-col-side {
			padding-bottom: 1.2rem;
			display: table-cell;
			vertical-align: top;
		}

	}
}


.uix-typo--color-white {

	.uix-feature {

		/* Horizontal Icons */
		.uix-feature__icon {

			&.is-bordered {
				border-color: #fff;
			}

		}



		/* Vertical Icons */
		.uix-feature__icon--side {


			&.is-bordered {


				&::before {
					border-color: #fff;

				}
			}

		}

	}

}
